<template>
	<view :class="pageClass" :style="pageStyle" v-if="pageReady" style="background-color: #F5F5F5;">
		<moxi-nav :set="navSet"></moxi-nav>
		<view class="scrollY" v-if="userinfo.id && hasData">
			<view class="task_detail" v-if="!(Object.keys(data).length === 0)">
				<view class="task_name con flex_row_between">
					<view class="title">任务名称</view>
					<view class="name u-line-1">{{ data.name }}</view>
				</view>
				<view class="publisher con">
					<view class="title">发布者</view>
					<view class="person-info">
						<view class="avatar">
							<image style="width: 48px; height: 48px;" :src="data.issuer.pic" mode="widthFix" />
						</view>
						<view class="office">
							<view style="margin-right: 8px;">{{ data.issuer.showname }}</view>
						</view>
					</view>
				</view>
				<view class="detailList con">
					<view class="detailItem">
						<view class="title">任务类型</view>
						<view class="content" v-for="item in priority" v-if="item.id == data.level"
							:style="{ 'color': item.color }">
							{{ item.name }}
						</view>
					</view>
					<view class="detailItem">
						<view class="title">状态</view>
						<view class="content" v-for="item in tabs" v-if="item.id == data.status"
							:style="{ 'color': item.color }">
							{{ item.name }}
						</view>
					</view>
					<view class="detailItem">
						<view class="title">起始时间</view>
						<view class="content">{{ $u.timeFormat(data.start_time, 'yyyy-mm-dd hh:MM:ss') }}</view>
					</view>
					<view class="detailItem">
						<view class="title">截至时间</view>
						<view class="content">
							{{ data.end_time == 0 ? '不限' : $u.timeFormat(data.end_time, 'yyyy-mm-dd hh:MM:ss') }}
						</view>
					</view>
					<view class="detailItem" v-if="data.status == 100">
						<view class="title">完结时间</view>
						<view class="content">
							{{ data.over_time == 0 ? '暂定' : $u.timeFormat(data.start_time, 'yyyy-mm-dd hh:MM:ss') }}
						</view>
					</view>
					<view class="detailItem">
						<view class="title">附件下载</view>
						<view class="content" style="display: flex;" v-if="data.file && data.file.length > 0"
							@click="openDownFIle(data.file)">
							<view>点击查看</view>
							<u-icon name="arrow-right" color="#333" size="16"></u-icon>
						</view>
						<view class="content" v-else>没有附件</view>
					</view>
					<view class="detailItem">
						<view class="title">历史交付</view>
						<view class="content" style="display: flex;" @click="getHistoryData(1)">
							<view>查看</view>
							<u-icon name="arrow-right" color="#333" size="16"></u-icon>
						</view>
					</view>
				</view>
				<view class="participate con">
					<view class="title">参与人员</view>
					<view class="showImgList">
						<view class="showImg" v-for="item in data.userInfo">
							<image style="width: 48px; height: 48px;" :src="item.pic" mode="scaleToFill" />
						</view>
					</view>
				</view>
				<view class="task_content con">
					<view class="title" style="margin-bottom: 12px;">任务详情</view>
					<u-parse :content="data.content"></u-parse>
				</view>
			</view>
			<view class="btnArea" v-if="data.status == 1">
				<view class="btn" style="background-color: #EA2121;" v-if="adminRole == 1" @click="openAllVetting(1)">
					审批交付
				</view>
				<view class="btn" :style="{ 'background-color': app_color }" v-else @click="openTaskPost">交付任务</view>
			</view>
		</view>
		<!-- 空数据 -->
		<view v-else>
			<u-empty mode="data"></u-empty>
		</view>
		<!-- 历史交付弹出层  -->
		<!-- #ifdef MP-BAIDU -->
		<view v-show="historyShow">
			<!-- #endif -->
			<view>
				<u-popup :show="historyShow" safeAreaInsetBottom :customStyle="{ maxHeight: '60vh' }"
					:overlayStyle="{ zIndex: '2' }" :zIndex="3" round="10" mode="bottom" @close="showClose"
					closeOnClickOverlay closeable>
					<view class="popup_con">
						<view class="popup_con_title">历史交付</view>
						<view class="popup_con_showScroll" v-if="historyData && historyData.length > 0">
							<scroll-view scroll-y style="height: 50vh" @scrolltolower="scrolltolower">
								<view class="u-list-item" v-for="(item, index) in historyData">
									<view class="time_line"
										:style="{ '--bg-color': item.status == 2 ? '#f56c6c' : item.status == 1 ? '#67c23a' : '#969799' }">
										<view class="cricle">
											<!-- 可以插入图标，大小和cricle一样 -->
										</view>
										<view class="line" v-if="index + 1 != historyData.length"></view>
									</view>
									<view class="item">
										<view class="title">交付说明:</view>
										<view class="textArea">
											<view class="u-line-3">{{ item.desc }}</view>
										</view>
									</view>
									<view class="item flex">
										<span class="title">审批状态:</span>
										<span style="display: inline-flex; margin: 4px 0;">
											<u-tag text="待审批" type="warning" plain v-if="item.status == 0"></u-tag>
											<u-tag text="审批通过" type="success" plain v-if="item.status == 1"></u-tag>
											<u-tag text="审批不通过" type="error" plain v-if="item.status == 2"></u-tag>
										</span>
									</view>
									<view class="item flex" v-if="item.status == 0">
										<span class="title">操作:</span>
										<span style="display: inline-flex; margin: 4px 0;">
											<u-tag text="删除" type="error"
												@click="delHistoryData(item.id, item.task_id)"></u-tag>
										</span>
									</view>
									<view class="item" v-if="item.status == 1 || item.status == 2">
										<view class="title">审批反馈:</view>
										<view class="textArea">
											<view class="u-line-3">{{ item.msg }}</view>
										</view>
									</view>
									<view class="item" v-if="item.status == 1 || item.status == 2">
										<span class="title">审批时间:</span>
										<span style="display: inline-flex;font-size: 12px;">{{
											$u.timeFormat(item.u_time,
												'yyyy-mm-dd hh:MM:ss') }}</span>
									</view>
								</view>
								<u-loadmore :status="historyHasData" loadingIcon="spinner" dashed color="#999" />
								<view style="margin-bottom: 12px;"></view>
							</scroll-view>
						</view>
						<view class="popup_con_noData" v-else>
							<u-empty mode="data"></u-empty>
						</view>
					</view>
				</u-popup>
			</view>
			<!-- #ifdef MP-BAIDU -->
		</view>
		<!-- #endif -->
		<!--  交付弹出层  -->
		<!-- #ifdef MP-BAIDU -->
		<view v-show="taskPostShow">
			<!-- #endif -->
			<view>
				<u-popup :show="taskPostShow" safeAreaInsetBottom mode="bottom" round="10" @close="showClose"
					closeOnClickOverlay closeable>
					<view class="popup_con">
						<view class="popup_con_title">交付任务</view>
						<view style="flex: 1; overflow: hidden; margin: 8px 15px 0;">
							<view class="taskPostItem">
								<view class="title">交付说明:</view>
								<u-textarea v-model="taskInfo.desc" maxlength="200" placeholder="请输入交付说明"></u-textarea>
							</view>
							<view class="taskPostItem">
								<view class="title">相关附件:</view>
								<view>附件上传仅支持PC端...</view>
							</view>
							<view class="taskPostItem">
								<u-button text="提交" :color="app_color" @click="postTaskData"></u-button>
							</view>
						</view>
					</view>
				</u-popup>
			</view>
			<!-- #ifdef MP-BAIDU -->
		</view>
		<!-- #endif -->
		<!-- 查看所有交付记录弹出层 -->
		<!-- #ifdef MP-BAIDU -->
		<view v-show="vettingInfoShow">
			<!-- #endif -->
			<view>
				<u-popup :show="vettingInfoShow" safeAreaInsetBottom :overlayStyle="{ zIndex: '2' }" :zIndex="3"
					mode="bottom" @close="showClose" closeOnClickOverlay closeable round="10"
					:customStyle="{ maxHeight: '60vh' }">
					<view class="popup_con">
						<view class="popup_con_title">审批交付</view>
						<view class="popup_con_showScroll" v-if="taskHandData && taskHandData.length > 0">
							<scroll-view scroll-y style="height: 50vh" @scrolltolower="scrolltolower">
								<view class="u-list-item" v-for="(item, index) in taskHandData">
									<view class="time_line"
										:style="{ '--bg-color': item.status == 2 ? '#f56c6c' : item.status == 1 ? '#67c23a' : '#969799' }">
										<view class="cricle">
											<!-- 可以插入图标，大小和cricle一样 -->
										</view>
										<view class="line" v-if="index + 1 != taskHandData.length"></view>
									</view>
									<view class="item flex">
										<view class="title">交付者:</view>
										<view class="personInfo"
											:style="{ '--app-color': app_color, '--bg-color': colorList[15] }">
											<view class="showImg">
												<image style="width: 16px; height: 16px;" :src="item.userInfo.pic"
													mode="scaleToFill" />
											</view>
											<view class="name u-line-1">{{ item.userInfo.showname }}</view>
										</view>
									</view>
									<view class="item">
										<view class="title">交付说明:</view>
										<view class="textArea">
											<view class="u-line-3">{{ item.desc }}</view>
										</view>
									</view>
									<view class="item flex">
										<span class="title">审批状态:</span>
										<span style="display: inline-flex; margin: 4px 0;">
											<u-tag text="待审批" type="warning" plain v-if="item.status == 0"></u-tag>
											<u-tag text="审批通过" type="success" plain v-if="item.status == 1"></u-tag>
											<u-tag text="审批不通过" type="error" plain v-if="item.status == 2"></u-tag>
										</span>
									</view>
									<view class="item flex" v-if="item.status == 0">
										<span class="title">操作:</span>
										<span style="display: inline-flex; margin: 4px 0;">
											<u-button text="审批" type="error" @click="openVetting(item.id)"></u-button>
										</span>
									</view>
									<view class="item" v-if="item.status == 1 || item.status == 2">
										<view class="title">审批反馈:</view>
										<view class="textArea">
											<view class="u-line-3">{{ item.msg }}</view>
										</view>
									</view>
									<view class="item" v-if="item.status == 1 || item.status == 2">
										<span class="title">审批时间:</span>
										<span style="display: inline-flex;font-size: 12px;">{{
											$u.timeFormat(item.u_time,
												'yyyy-mm-dd hh:MM:ss') }}</span>
									</view>
								</view>
								<u-loadmore :status="taskHandHasData" loadingIcon="spinner" dashed color="#999" />
								<view style="margin-bottom: 12px;"></view>
							</scroll-view>
						</view>
						<view class="popup_con_noData" v-else>
							<u-empty mode="data"></u-empty>
						</view>
					</view>
				</u-popup>
			</view>
			<!-- #ifdef MP-BAIDU -->
		</view>
		<!-- #endif -->
		<!-- 审批交付弹出层 -->
		<!-- #ifdef MP-BAIDU -->
		<view v-show="vettingTaskShow">
			<!-- #endif -->
			<view>
				<u-popup closeable :show="vettingTaskShow" safeAreaInsetBottom mode="bottom" round="10"
					@close="vettingTaskShow = false" closeOnClickOverlay>
					<view class="popup_con">
						<view class="popup_con_title">交付任务</view>
						<view style="flex: 1; overflow: hidden; margin: 8px 15px 0;">
							<view class="taskPostItem">
								<view class="title">审批结果:&ensp;{{ currentIndex >= 0 ? statusList[currentIndex].name : ''
								}}
								</view>
								<u-subsection :activeColor="app_color" :list="statusList" keyName="name"
									@change="changeStatus" :current="currentIndex"></u-subsection>
							</view>
							<view class="taskPostItem">
								<view class="title">审批反馈:</view>
								<u-textarea v-model="vettingTaskData.msg" maxlength="200"
									placeholder="请输入交付说明"></u-textarea>
							</view>
							<view class="taskPostItem">
								<u-button text="提交审批" :color="app_color" @click="postVettingTaskData"></u-button>
							</view>
						</view>
					</view>
				</u-popup>
			</view>
			<!-- #ifdef MP-BAIDU -->
		</view>
		<!-- #endif -->
		<!-- 附件下载弹出层 -->
		<!-- #ifdef MP-BAIDU -->
		<view v-show="downFileShow">
			<!-- #endif -->
			<view>
				<u-popup :show="downFileShow" safeAreaInsetBottom :overlayStyle="{ zIndex: '2' }" :zIndex="3"
					mode="bottom" @close="showClose" closeOnClickOverlay closeable round="10"
					:customStyle="{ maxHeight: '60vh' }">
					<view class="popup_con">
						<view class="popup_con_title">附件下载</view>
						<view class="popup_con_showScroll" v-if="fileData && fileData.length > 0">
							<scroll-view scroll-y style="height: 50vh">
								<view class="file_down" v-if="hasData">
									<view class="file_item" v-for="item in fileData">
										<view class="name">{{ item.desc }}</view>
										<!-- #ifndef H5 -->
										<view class="controll">
											<view style="color: #365CD2;" @click="downFile(item.file, true)">预览</view>
											<view>|</view>
											<view style="color: #EA2121;" @click="downFile(item.file)">下载</view>
										</view>
										<!-- #endif -->
										<!-- #ifdef H5 -->
										<view class="controll">
											<a style="color: #EA2121; text-decoration: none;" :download="item.desc"
												:href="downFileUrl(item.file)">下载</a>
										</view>
										<!-- #endif -->
									</view>
								</view>
							</scroll-view>
						</view>
						<view class="popup_con_noData" v-else>
							<u-empty mode="data"></u-empty>
						</view>
					</view>
				</u-popup>
			</view>
			<!-- #ifdef MP-BAIDU -->
		</view>
		<!-- #endif -->
		<!-- <moxi-tabbar :set="tabbar" v-if="tabbar.index_id"></moxi-tabbar> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			task_id: -1,
			priority: [
				{
					id: 3,
					name: '紧急',
					color: '#EA2121'
				},
				{
					id: 2,
					name: '重要',
					color: '#FF8B01'
				},
				{
					id: 1,
					name: '普通',
					color: '#365CD2'
				}
			],
			tabs: [
				{
					name: '进行中',
					id: 1,
					icon: 'hourglass',
					color: '#365CD2',
				},
				{
					name: '等待开始',
					id: 0,
					icon: 'file-text-fill',
					color: '#FF8B01',
				},
				{
					name: '已完结',
					id: 100,
					icon: 'checkmark-circle',
					color: '#4CAF50',
				}
			],
			data: {},
			hasData: false, // 是否有数据
			adminRole: 0, // 角色 0 非管理员 1 管理员

			taskStatusShow: false, // 结束任务是否显示

			// 历史交付是否显示
			historyShow: false,
			historyInfo: {
				id: -1,
				page: 1,
				page_num: 20,
				status: -1, // -1 全部 0 待审批 1 已审批
			},
			historyData: [], // 历史交付数据
			historyHasData: 'loadmore', // 历史交付是否有数据 默认有数据

			// 交付任务是否显示
			taskPostShow: false,
			taskInfo: {
				id: -1,
				desc: '',
				file: [],
			},

			// 所有审批交付是否显示
			vettingInfoShow: false,
			// 所有审批交付信息
			taskHandInfo: {
				id: -1,
				page: 1,
				page_num: 5,
			},
			taskHandData: [], // 所有审批交付数据
			taskHandHasData: 'loadmore', // 所有审批交付是否有数据 默认有数据

			// 审批交付是否显示
			vettingTaskShow: false,
			vettingTaskData: {
				id: -1,
				msg: '',
				status: 1, // 2 不通过 1 通过
			},
			statusList: [{ id: 2, name: '未通过' }, { id: 1, name: '通过' }],
			currentIndex: -1,

			downFileShow: false,
			fileData: [], // 附件数据
		}
	},
	onLoad(options) {
		// 页面加载时执行
		if (options && options.task_id >= 0) {
			this.task_id = options.task_id;
			// 判断用户是否登录，如果没有登录则跳转到登录页面
			if (!this.userinfo || !this.userinfo.id) {
				// 清空缓存
				this.toLogin();
				return;
			}
			// 内容为空则获取数据
			this.moxiPost(
				'/plugin/oa/user/task/task_info',
				{ id: this.task_id },
				(res) => {
					this.$set(this, 'data', res.data);
					if (this.data) this.hasData = true;
					this.getAdminRole(this.data.uid);
				}
			)
		} else {
			this.hasData = false;
			this.msg('获取数据失败!');
			uni.redirectTo({ url: '/plugin_oa/task_manage' });
		}
	},
	methods: {
		openDownFIle(file) {
			this.$set(this, 'fileData', file);
			this.$nextTick(() => {
				this.downFileShow = true;
			});
		},
		downFileUrl(file) {
			// 如果file第一个位置是/ 则去除file第一个/
			if (file.indexOf('/') == 0) {
				file = file.substring(1);
			}
			return this.moxiConfig().domain + file;;
		},
		// 下载文件
		downFile(file, see = false) {
			// #ifndef H5
			let downloadUrl = this.downFileUrl(file);
			let self = this;
			uni.downloadFile({
				url: downloadUrl, // 文件的下载地址
				success: (downloadResult) => {
					if (downloadResult.statusCode === 200) {
						uni.saveFile({
							tempFilePath: downloadResult.tempFilePath, // 文件的临时路径
							success: (saveResult) => {
								this.msg('文件已保存至' + saveResult.savedFilePath);
								if (see) {
									// 可以选择打开文件进行预览
									uni.openDocument({
										filePath: saveResult.savedFilePath,
										success: () => {
											self.msg('打开成功!')
										}
									});
								}
							}
						});
					}
				}
			});
			// #endif
		},
		changeStatus(index) {
			this.currentIndex = index;
			this.vettingTaskData.status = this.statusList[index].id;
		},
		postVettingTaskData() {
			if (this.vettingTaskData.msg == '') {
				this.msg('审批反馈不能为空');
				return;
			}
			this.isBox('确定要提交审批吗？', () => {
				this.moxiPost(
					'/plugin/oa/user/task/audit_hand',
					this.vettingTaskData,
					(res) => {
						this.msg(res.hint);
						this.taskHandData.forEach((item) => {
							if (item.id == this.vettingTaskData.id) {
								item.status = this.vettingTaskData.status;
								item.msg = this.vettingTaskData.msg;
								item.u_time = +new Date().getTime();
							}
						})
						this.$nextTick(() => {
							this.vettingTaskShow = false;
						})
					},
				)
			}, '提交后将无法修改，请谨慎操作！')
		},
		// 打开审批
		openVetting(id) {
			// 重置表单
			this.vettingTaskData = {
				id: -1,
				msg: '',
				status: 1,
			}
			this.currentIndex = this.vettingTaskData.status;
			this.vettingTaskData.id = id;
			this.vettingTaskShow = true;
		},
		// 打开任务所有交付
		openAllVetting(page) {
			if (page) {
				this.taskHandInfo.page = page;
			}
			this.taskHandInfo.id = this.task_id;
			this.moxiPost(
				'/plugin/oa/user/task/get_hand',
				this.taskHandInfo,
				(res) => {
					if (!this.vettingInfoShow) this.taskHandData = [];
					this.taskHandData.push(...res.data.data);
					if (res.data.data && res.data.data.length != this.taskHandInfo.page_num) this.taskHandHasData = 'nomore'
					this.vettingInfoShow = true;
				}
			)
		},
		openTaskPost() {
			this.taskPostShow = true;
			// 重置表单
			this.taskInfo = {
				id: -1,
				desc: '',
				file: [],
			}
		},
		postTaskData() {
			this.taskInfo.id = this.task_id;
			if (this.taskInfo.desc == '') {
				this.msg('交付说明不能为空');
				return;
			}
			this.moxiPost(
				'/plugin/oa/user/task/hand_task',
				this.taskInfo,
				(res) => {
					this.msg(res.hint);
					this.$nextTick(() => {
						this.showClose();
					})
				},
			)
		},
		delHistoryData(id) {
			this.isBox('确定要删除该交付吗？', () => {
				this.moxiPost(
					'/plugin/oa/user/task/del_my_hand',
					{ id: id },
					(res) => {
						this.msg(res.hint);
						// 移除数组中id为id的元素
						this.historyData = this.historyData.filter((item) => {
							return item.id != id;
						})
					}
				)
			}, '删除后将无法复原，请谨慎操作！')
		},
		scrolltolower() {
			if (this.historyShow) {
				if (this.historyHasData == 'loadmore') {
					this.historyInfo.page++;
					this.getHistoryData();
				}
			}
			if (this.vettingInfoShow) {
				if (this.taskHandHasData == 'loadmore') {
					this.taskHandInfo.page++;
					this.openAllVetting();
				}
			}
		},
		getHistoryData(page) {
			if (page) {
				this.historyInfo.page = page;
			}
			this.historyInfo.id = this.task_id;
			this.moxiPost(
				'/plugin/oa/user/task/my_hand',
				this.historyInfo,
				(res) => {
					if (!this.historyShow) this.historyData = [];
					if (this.historyHasData = 'loadmore') {
						this.historyData.push(...res.data.data);
						if (res.data.data && res.data.data.length != this.historyInfo.page_num) this.historyHasData = 'nomore';
					}
					this.historyShow = true;
				}
			)
		},
		showClose() {
			this.historyShow = false;
			this.taskPostShow = false;
			this.vettingInfoShow = false;
			this.taskStatusShow = false;
			this.downFileShow = false;
		},
		getAdminRole(id) {
			if (id == this.userinfo.id) {
				this.adminRole = 1;
			}
		},
	},
}
</script>

<style lang="scss" scoped>
@mixin flex($gap: 8px, $ju: space-between, $al: center, $fd: row, $wrap: nowrap) {
	display: flex;
	justify-content: $ju;
	align-items: $al;
	gap: $gap;
	flex-wrap: $wrap;
	flex-direction: $fd;
}

.scrollY {
	flex: 1;
	@include flex(0, normal, normal, column, nowrap);
	overflow: hidden;

	.task_detail {
		margin: 0 8px;
		padding-top: 12px;
		flex: 1;
		overflow-x: hidden;
		overflow-y: scroll;

		.con {
			padding: 16px;
			color: #333;
			background-color: #fff;
			border-radius: 8px;
			margin-bottom: 12px;
			font-size: 16px;
			justify-content: space-between;
		}

		.person-info {
			@include flex;
			justify-content: normal;
			font-size: 14px;
			color: #000;
			font-weight: bold;
			margin-top: 12px;

			.avatar {
				width: 48px;
				height: 48px;
				border-radius: 8px;
				overflow: hidden;
				flex-shrink: 0;
			}
		}

		.detailList {
			display: flex;
			gap: 16px;
			flex-direction: column;

			.detailItem {
				@include flex(0, space-between, center, row, nowrap);
				padding-bottom: 16px;
				border-bottom: 0.5px solid rgba($color: #000000, $alpha: 0.1);

				&:last-of-type {
					padding-bottom: 0;
					border: none;
				}
			}
		}

		.vetting {
			@include flex(0, space-between, center, row, nowrap);

			.open {
				display: flex;
			}
		}

		.participate {
			.showImgList {
				@include flex(8px, flex-start, center, row, nowrap);
				margin-top: 12px;

				.showImg {
					width: 48px;
					height: 48px;
					border-radius: 6px;
					overflow: hidden;
				}
			}
		}

	}

	.btnArea {
		flex-shrink: 0;
		width: 100%;
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		border-radius: 4px;
		color: #fff;
		background-color: #fff;
		border-radius: 8px 8px 0 0;

		.btn {
			margin: 0 16px;
			margin-bottom: 12px;
			border-radius: 999px;
			height: 48px;
			line-height: 48px;
			cursor: pointer;

			&:first-of-type {
				margin-top: 12px;
			}

			&:hover {
				opacity: 0.9;
			}
		}
	}
}

.popup_con {
	padding-top: 36px;
	display: flex;
	flex-direction: column;
	position: relative;
	flex: 1;

	&_title {
		position: absolute;
		left: 15px;
		top: 13px;
		font-size: 18px;
		font-weight: bold;
	}

	&_close {
		width: 16px;
		height: 16px;
		position: absolute;
		right: 15px;
		top: 15px;
	}

	&_showScroll {
		flex: 1;
		margin-top: 8px;
	}

	&_noData {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 30vh;
	}
}

.u-list-item {
	margin: 0 15px;
	padding: 0 0 16px 16px;
	font-size: 14px;
	color: #666;
	position: relative;

	.time_line {
		position: absolute;
		left: 0;
		top: 4px;
		width: 12px;
		height: 100%;

		.cricle {
			position: absolute;
			top: 0;
			left: 0;
			width: 12px;
			height: 12px;
			border-radius: 50%;
			background-color: var(--bg-color);
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.line {
			position: absolute;
			top: 18px;
			left: 5px;
			width: 2px;
			height: calc(100% - 24px);
			background-color: var(--bg-color);
		}
	}

	.item {
		.title {
			color: #000;
			margin: 0 8px 4px 0;
		}

		.personInfo {
			@include flex(6px, flex-start, center, row, nowrap);
			display: inline-flex;
			font-size: 12px;
			padding: 3px;
			border: 1px solid var(--app-color);
			color: var(--app-color);
			background-color: var(--bg-color);
			border-radius: 4px;

			.showImg {
				width: 16px;
				height: 16px;
				border-radius: 99px;
				overflow: hidden;
			}
		}

		.textArea {
			padding: 8px;
			border-radius: 8px;
			background-color: #f2f2f2;
			font-size: 12px;
			margin-bottom: 4px;
		}

		&.flex {
			@include flex(0, space-between, center, row, nowrap);
		}
	}
}

.taskPostItem {
	margin-bottom: 12px;

	.title {
		margin-bottom: 4px;
	}

	.flex {
		@include flex(4px, normal, center, row, nowrap);
	}
}

.file_down {
	padding-top: 12px;

	.file_item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16px;
		border-radius: 6px;
		font-size: 16px;
		color: #333;
		background-color: #fff;
		margin-bottom: 12px;

		.controll {
			display: flex;
			align-items: center;
			gap: 8px;
		}
	}
}

.flex_row_between {
	@include flex(0, space-between, center, row, nowrap);
}
</style>